<template>
	<view class="containerbox bgc-white" style="background: linear-gradient(180deg,#c4f2e7,#f5f8e5,#f1f1f1);">
		<gl_nav
			isShowRight
			bgColor="transparent"
			>
			<!-- reqdata.sourceType == 10 || reqdata.sourceType == 11 ? backFun() : submitStatus = true -->
			<template #right>
				<view class="flex items-center">
					<view class="flex flex-column justify-center items-center mr-20">
						<image :src="`${imgPath}png/pic14.png`" mode="heightFix" style="height: 25rpx;"></image>
						<c_timedown size="18" :time="detail.duration * 60"></c_timedown>
					</view>
					<image @click="cardStatus = true" :src="`${imgPath}png/pic15.png`" class="w-50 h-50 mr-20"></image>
				</view>
			</template>
		</gl_nav>
		<view class="containerbox flipper" :class="{open: open}">
			<template v-for="(item,index) in flowlist">
				<view class="containerbox front" v-if="index === swiperindex" :key="index">
					<view class="containerbox">
						<view class="flex items-center justify-center" style="padding-top: 240rpx;">
							<view class="word mr-10" style="font-size: 80rpx;" @click="playAudio(item.voiceFile?.url)">{{item.word}}</view>
							<!-- <uni-icons type="sound-filled" size="40rpx"></uni-icons> -->
						</view>
						<view class="flex items-center justify-center mt-20" @click="playAudio(item.voiceFile?.url)">
							<!-- <view class="badge" @click="open = true">{{item.soundmark}}</view> -->
							<text class="text-26">{{item.soundmark}}</text>
							<view class="ml-10">
								<c_trumpet :play="isPlayWord"/>
							</view>
						</view>
					</view>
					<view class="px-30 pb-50 justify-between flex items-center text-48">
						<view class="spell spell-tishi w-90 h-90 bgc-white round-30 flex items-center justify-center" @click="open = true" style="color: #00c386;"></view>
						
						<view class="flex items-center justify-center flex-column relative" v-if="item.answerFile" >
							<view
								class="absolute text-24 badge" 
								style="left: 50%; top: -80rpx; margin-top: 0; white-space: nowrap; transform: translateX(-50%);"
								@click="item.answerFile = null"
							>
								修改答题 <uni-icons type="right" size="24rpx"></uni-icons>
							</view>
							<view 
								class="w-90 h-90 bgc-white round-30 flex items-center relative justify-center text-30" 
								style="color: #00c386;"
								hover-class="botton-active"
								@click="playAudio(item.answerFile?.url)">
								<view class="absolute" style="left: 22rpx; top: 20rpx;">
									<c_trumpet :play="isPlayWord"/>
								</view>
							</view>
							<!-- <text class="px-30 h-90 bgc-white round-30 flex items-center justify-center text-30 normal text-9ca2a0" v-else>/rI'kwest/</text> -->
							<!-- <view 
								class="w-100 h-100 round-100 flex items-center justify-center ml-30" 
								style="background-color: #00c386;" 
								@click="playAudio(item.answerFile?.url)"
							>
								<uni-icons type="sound-filled" size="28" color="#fff"></uni-icons>
							</view>
							<view
								class="h-80 text-30 round-100 flex items-center justify-center mt-30 text-white" 
								style="background-color: #00c386; padding: 0 150rpx;"
								@click="item.answerFile = null"
							>
								修改答题
							</view> -->
						</view>
						<template v-else>
							<nb-voice-record :recordOptions="{format: 'mp3', duration: 60000}" @startRecord="start" @endRecord="endRecord($event, item)" @cancelRecord="cancel" />
						</template>
						<view @click="nextEvent(1)" class="spell spell-zhengque w-90 h-90 bgc-white round-30 flex items-center justify-center" hover-class="botton-active"/>
					</view>
				</view>
			</template>
			<view class="containerbox back">
				<view class="containerbox px-40">
					<view class="word pt-40" style="text-align: left;">check</view>
					<view class="flex items-center">
						<view class="badge"><uni-icons type="sound-filled" size="40rpx"></uni-icons>/s3:rd3en/</view>
					</view>
					<view class="mt-40 border-bottom pb-40">
						<view class="text-28">v. 检查；控制；查看；检验；核查；核实；审查；托运（行李）；阻止；查明；抑制；克制，抑制；存放；弄确实</view>
					</view>
					<view class="mt-40">
						<view class="title">
							<text class="text-30 font-weight-700">例句</text>
							<text class="title_tip w-30 h-30 round-full bgc-primary2" />
						</view>
						<view class="text-26 mt-40">
							<view class="text-gray">The government is determined to check the growth of public spending.</view>
							<view class="mt-15">政府决心要控制公共开支的增长。</view>
						</view>
						<view class="text-26 mt-40">
							<view class="text-gray">She wanted to tell him the whole truth but she checked herself─it wasn't the right moment</view>
							<view class="mt-15">她本想告诉他全部真相，但是又忍住了——那还不是时候。</view>
						</view>
					</view>
				</view>
				<view class="px-70 pb-100 pt-20">
					<view class="bgc-blue round-50 text-white text-30 h-100 flex-center" @click="open = false">返回</view>
				</view>
			</view>
		</view>
	</view>
	<c_cards istask v-model="cardStatus" :list="flowlist" :index="swiperindex" @card="swiperindex = $event"/>
	<dialog_submit 
		v-model="submitStatus" 
		istask 
		@success="subtaskEvent" 
		:questIndex="swiperindex" 
		:examdata="{list: readylist, total: flowlist.length, time: detail.duration}" />
	<c_cards
		istask
		v-model="cardStatus" 
		:index="swiperindex" 
		:list="flowlist" 
		@card="swiperindex = $event" 
		@submit="submitStatus = true" />
</template>

<script setup>
import { getCurrentInstance, onBeforeUnmount, reactive, ref, watch } from "vue"
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app"
import useInit from './lib/useInit'
import { useCos } from '@/common/hooks/useCos'
import useAudio from '@/common/hooks/useAudio'
import { postSpoken_api, postTaskAnswer_api } from '@/common/api/task'

import c_timedown from '@/pages/components/questOther/timedown.vue'
import c_cards from '@/pages/components/questOther/cards.vue'
import c_trumpet from './trumpet.vue'
import dialog_submit from '@/pages/components/questOther/dialog_submit.vue'

const { playAudio, isPlayWord } = useAudio()

const imgPath = uni._appConfig.imgPath

const open = ref(false)
const cardStatus = ref(false)

const { flowlist, detail, readylist } = useInit()
const swiperindex = ref(0)

const isRecord = ref(false)
function start(){
	isRecord.value = true
}
async function endRecord(data, item){
	isRecord.value = false
	const { cosdata, str, cosapi, resdata } = await useCos(data.tempFilePath)
	let obj = {
		taskId: detail.value.id,
		vocabularyId: item.id,
		useTime: 30,
		answerFile: str
	}
	console.log(44444, cosdata, str, cosapi)
	let res = await postSpoken_api(obj)
	console.log(555, resdata)
	if(!item.answerFile){
		readylist.push(item)
	}
	console.log(flowlist.value,swiperindex.value)
	flowlist.value[swiperindex.value].answerFile = {
		path: str,
		url: 'https://' + resdata.Location
	}
}

function nextEvent(type){
	if(isRecord.value){
		uni.showToast({
			title: '正在录音',
			icon: 'none'
		})
		return false
	}
	if(type === 1){
		open.value = true
	} else{
		if((swiperindex.value+1) === flowlist.value.length){
			submitStatus.value = true
		} else{
			swiperindex.value++
			open.value = false
		}
	}
}



const submitStatus = ref(false)
function subtaskEvent(){
	postTaskAnswer_api({taskId: detail.value.id}).then(res => {
		uni.showToast({ icon: 'none', position: 'bottom', title: '作业提交成功~'})
		uni.navigateBack({ delta: 2 })
	})
}

</script>

<style lang="scss" scoped>
.word{
	text-align: center;
	font-size: 80rpx;
	font-weight: 600;
}
.badge{background-color: #e1e1e1; padding: 8rpx 30rpx;  margin-top: 40rpx; display: flex; align-items: center; justify-content: center; border-radius: 50rpx; font-size: 24rpx;}
.flipper {
	transition: transform 0.6s;
	transform-style: preserve-3d;
	position: relative;
}
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.front {
	z-index: 2;
}
.back {
	transform: rotateY(180deg);
	z-index: 1;
}
.open{
	transform: rotateY(180deg);
}
.title {
	position: relative;
	.title_tip {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-8rpx, 0);
		opacity: .2;
	}
}
</style>
